<template>
  <div id="app">
    <!--<input
      type="text"
      v-model="title"
      @keydown.enter.alt="onKey"
    >-->
    <!--<span>Multiline message is:</span>
    <p style="white-space: pre-line;">
      {{ message }}
    </p>
    <br>
    <textarea
      v-model="message"
      placeholder="add multiple lines">
    </textarea>-->

<!--    <input type="checkbox" id="checkbox" v-model="checked">-->
<!--    <label for="checkbox">{{ checked }}</label>-->

    <!--
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    -->

    <!--<div id="example-4">
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>Picked: {{ picked }}</span>
    </div>-->
    <!--<select v-model="picked">
      <option disabled value="">请选择</option>
      <option value="aaa">A</option>
      <option value="bbb">B</option>
      <option value="ccc">C</option>
    </select>
    <span>Selected: {{ picked }}</span>-->
<!--    <h1>{{ title }}</h1>-->
<!--    <h1>{{ typeof title }}</h1>-->
<!--    <input type="text" v-model="title">-->
<!--    <input type="text" v-model.number="title">-->
<!--    <input type="text" v-model.lazy="title">-->
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      checkedNames: [],
      title: '',
      message: '',
      checked: true,
      picked: 'ccc'
    }
  },
  methods: {
    onKey() {
      console.log(this.title)
    }
  }
}
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }

  .box {
    height: 600px;
    width: 600px;
    background: #2c3e50;
  }

  .box1 {
    height: 400px;
    width: 400px;
    background: #fd3952;
    overflow: auto;
  }
  .box2 {
    height: 800px;
    width: 200px;
    background: #8d1dfd;
  }
</style>
